<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>哒哒哒</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			#container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid magenta;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<canvas id="c1" width="500px" height="500px"></canvas>
			<input type="button" id="hb" value="画笔" />
			<input type="button" id="sxjx" value="实心矩形" />

			<input type="button" id="kxjx" value="空心矩形" />
			<input type="button" id="kxy" value="空心圆" />
			<input type="button" id="sxy" value="实心圆" />
		</div>

	</body>
	<script type="text/javascript">
		window.onload = function() {
			let oCanvas = document.getElementById('c1');

			let oPen = oCanvas.getContext("2d");

			// document.onmousemove=function(e){
			// 	'x='+(e.pageX-oCanvas.offsetLeft);
			// 	'y='+(e.pageY-oCanvas.offsetTop);
			// }
			let hb = document.getElementById('hb');
			hb.onclick = function() {
				var x, y
				var f = 0;
				document.onmousedown = function(e) {
					x = +(e.pageX - oCanvas.offsetLeft);
					y = +(e.pageY - oCanvas.offsetTop);
					oPen.moveTo(x, y);
					f = 1;
					console.dir(x);
					document.onmousemove = function(e) {
						x = (e.pageX - oCanvas.offsetLeft);
						y = (e.pageY - oCanvas.offsetTop);
						if(f == 1) {
							oPen.lineTo(x, y)
							oPen.stroke();
						}
					}

					document.onmouseup = function(e) {
						f = 0
					}
					console.dir(x);
				}
			}

			let sxjx = document.getElementById('sxjx');
			sxjx.onclick = function() {
				var x, y, x1, y2
				var f = 0;
				document.onmousedown = function(e) {
					x = +(e.pageX - oCanvas.offsetLeft);
					y = +(e.pageY - oCanvas.offsetTop);
					x1 = x;
					y1 = y;
					f = 1;
					console.dir(x);
					document.onmousemove = function(e) {
						if(f == 1) {
							oPen.clearRect(x1, y1, (x - x1), y - y1);
							x = (e.pageX - oCanvas.offsetLeft);
							y = (e.pageY - oCanvas.offsetTop);

							oPen.fillRect(x1, y1, (x - x1), y - y1);
						}

					}

					document.onmouseup = function(e) {

						f = 0
						x = (e.pageX - oCanvas.offsetLeft);
						y = (e.pageY - oCanvas.offsetTop);

						oPen.fillRect(x1, y1, (x - x1), y - y1);

					}

					console.dir(x);
				}
			}

			let kxjx = document.getElementById('kxjx');
			kxjx.onclick = function() {
				var x, y, x1, y2, h
				var f = 0;
				document.onmousedown = function(e) {
					x = +(e.pageX - oCanvas.offsetLeft);
					y = +(e.pageY - oCanvas.offsetTop);
					x1 = x;
					y1 = y;
					f = 1;
					console.dir(x);
					document.onmousemove = function(e) {

						x = (e.pageX - oCanvas.offsetLeft);
						y = (e.pageY - oCanvas.offsetTop);
						if(f == 1) {
							oPen.clearRect(0, 0, 500, 500);
							oPen.strokeRect(x1, y1, (x - x1), y - y1);
							// x=x-x1;
							// y=y-y1
							// h=Math.sqrt(y*y+x*x);
							// oPen.arc(x1,y1,h,0,Math.PI*2,false);
							// oPen.fill();
						}
					}

					document.onmouseup = function(e) {
						f = 0
						// x=(e.pageX-oCanvas.offsetLeft);
						// y=(e.pageY-oCanvas.offsetTop);
						// if(f==0){
						// 	oPen.strokeRect(x1,y1,(x-x1),y-y1);
						// }
						console.dir(x);
					}
				}
			}

			let sxy = document.getElementById('sxy');
			sxy.onclick = function() {
				var x, y, x1, y2, h
				var f = 0;
				document.onmousedown = function(e) {
					x = +(e.pageX - oCanvas.offsetLeft);
					y = +(e.pageY - oCanvas.offsetTop);
					x1 = x;
					y1 = y;
					f = 1;
					console.dir(x);
					document.onmousemove = function(e) {

						x = (e.pageX - oCanvas.offsetLeft);
						y = (e.pageY - oCanvas.offsetTop);
						if(f == 1) {
							oPen.clearRect(0, 0, 500, 500);
							// oPen.strokeRect(x1,y1,(x-x1),y-y1);
							x = x - x1;
							y = y - y1
							oPen.beginPath();
							h = Math.sqrt(y * y + x * x);
							oPen.arc(x1, y1, h, 0, Math.PI * 2, false);

							oPen.fill();
							oPen.closePath();
						}
					}

					document.onmouseup = function(e) {
						f = 0
						// x=(e.pageX-oCanvas.offsetLeft);
						// y=(e.pageY-oCanvas.offsetTop);
						// if(f==0){
						// 	oPen.strokeRect(x1,y1,(x-x1),y-y1);
						// }
						console.dir(x);
					}
				}
			}

			let kxy = document.getElementById('kxy');
			kxy.onclick = function() {
				var x, y, x1, y2, h
				var f = 0;
				document.onmousedown = function(e) {
					x = +(e.pageX - oCanvas.offsetLeft);
					y = +(e.pageY - oCanvas.offsetTop);
					x1 = x;
					y1 = y;
					f = 1;
					console.dir(x);
					document.onmousemove = function(e) {

						x = (e.pageX - oCanvas.offsetLeft);
						y = (e.pageY - oCanvas.offsetTop);
						if(f == 1) {
							oPen.clearRect(0, 0, 500, 500);

							x = x - x1;
							y = y - y1
							h = Math.sqrt(y * y + x * x);
							oPen.beginPath();
							oPen.arc(x1, y1, h, 0, Math.PI * 2, false);
							oPen.stroke();
							oPen.closePath()
						}
					}

					document.onmouseup = function(e) {
						f = 0
						// x=(e.pageX-oCanvas.offsetLeft);
						// y=(e.pageY-oCanvas.offsetTop);
						// if(f==0){
						// 	oPen.strokeRect(x1,y1,(x-x1),y-y1);
						// }
						console.dir(x);
					}
				}
			}
		}
	</script>

</html>